<template>
  <div>
    <el-button type="primary" @click="
        dialogFormVisible = true;
        operataType = 'save';"
         style="margin-bottom: 20px;">
         添加品牌信息
        </el-button>
    <el-dialog
      title="品牌信息"
      :visible.sync="dialogFormVisible"
      @close="handleClose"
      style="text-align: center;"
    >
      <el-form :model="brands" >
        <el-form-item label="品牌编号" v-if="operataType == 'save'" >
          <el-input v-model="brands.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌名字" >
          <el-input v-model="brands.brand_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌类型" >
          <el-input v-model="brands.brand_type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌图片" >
            <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <el-image
                style="width: 100px; height: 100px"
                v-if="brands.brand_img" :src="brands.brand_img"
               ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据表格 -->
    <el-table border stripe :data="brand" max-height="500" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="品牌编号" width="180">
        <template slot-scope="scope">
          <td>{{ scope.row.id }}</td>
        </template>
      </el-table-column>
      <el-table-column label="品牌名字" width="180">
        <template slot-scope="scope">
          <td>{{ scope.row.brand_name }}</td>
        </template>
      </el-table-column>
      <el-table-column label="品牌类型" width="180">
        <template slot-scope="scope">
          <td>{{ scope.row.brand_type }}</td>
        </template>
      </el-table-column>
      <el-table-column label="品牌图片" width="180">
       
        <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.brand_img"
                ></el-image>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="current"
      @current-change="load"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "BrandView",
  data() {
    return {
      //购物车商品列表
      brand: [],
      dialogFormVisible: false, //控制对话框的显示
      formLabelWidth: "120px",
      brands: { id: "", brand_name: "", brand_type: "", brand_img: "" }, //用户数据
      operataType: "", //操作类型  save  update
      total: 0, //用户总数
      pageSize: 5, //每页行数
      current: 0, //当前页数
    };
  },
  methods: {
    //加载函数
    load(current) {
      //分页
      this.current = current;
      //调用后台的方法，参数是url
      this.$http
        .get(
          "brand?action=page&current=" +
            this.current +
            "&pageSize=" +
            this.pageSize
        )
        .then((resp) => {
          //处理后台返回的结果
          console.log(resp.data);
          //数据绑定
          if (resp.data.data) {
            this.brand = resp.data.data.records;
            this.total = resp.data.data.total;
          }
        });
    },
    handleEdit(index, row) {
      this.operataType = "update";
      //显示对话框，绑定数据
      this.dialogFormVisible = true;
      //进行深克隆 row-->Strign-->json
      this.brands = JSON.parse(JSON.stringify(row));
    },
    //保存数据操作
    handleSave() {
      if (this.operataType == "save") {
        //添加用户操作
        console.log("save brand");
        this.$http
          .post("/brand?action=save", this.$qs.stringify(this.brands))
          .then((resp) => {
            console.log("brand", resp.data);
            if (resp.data.data == true) {
              this.load(this.current);
            }
          });
      } else {
        //更新用户操作
        this.$http
          .post("/brand?action=update", this.$qs.stringify(this.brands))
          .then((resp) => {
            console.log("update brand", resp.data);
            if (resp.data.data == true) {
              this.load(this.current);
            }
          });
      }
      this.dialogFormVisible = false;
    },
    handleDelete(index, row) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.post("/brand?action=delete&id=" + row.id).then((resp) => {
            if (resp.data.data == true) {
              this.load(this.current);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //对话框关闭
    handleClose() {
      (this.brands = { id: "", brand_name: "", brand_type: "", brand_img: "" }), //用户数据
        (this.operataType = "");
    },
    handleAvatarSuccess(res, file) {
            console.log('upload',res.data)
            this.brands.brand_img = res.data
        }
  },
  //页面挂载钩子
  mounted() {
    this.load(1);
  },
};
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
}
</script>